<template>
  <div>
    <van-row @click="showLogin">
      <van-col span="6">
        <img :src="avatarSrc" alt />
      </van-col>
      <van-col span="14">{{ nickname }}</van-col>
      <van-col span="4">
        <van-icon :name="logIcon" @click="showLoginOut" />
      </van-col>
    </van-row>
    <van-grid :column-num="3" square>
      <van-grid-item icon="photo-o" text="文字" />
      <van-grid-item icon="photo-o" text="文字" />
      <van-grid-item icon="photo-o" text="文字" />
      <van-grid-item icon="photo-o" text="文字" />
    </van-grid>

    <!-- 登录确认框 -->
    <van-popup v-model="isShowLogin">
      <van-form @submit="onSubmit">
        <van-field
          v-model="username"
          name="username"
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
          v-model="password"
          type="password"
          name="pwd"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        <div style="margin: 16px">
          <van-button round block type="danger" native-type="submit"
            >提交</van-button
          >
        </div>
      </van-form>
    </van-popup>

    <!-- 登出确认框 -->
    <van-dialog v-model="isShowLogout" title="登出账号确认" show-cancel-button @confirm="logout">
      <div style="text-align:center;padding: .2rem 0;">您是否想要退出当前账号？</div>
    </van-dialog>
  </div>
</template>

<script>
import { UserLoginAPI } from "@/request/api.js";
import avatarSrc from "../assets/avatar.png"
import { mapMutations, mapState } from 'vuex';
export default {
  data() {
    return {
      avatarSrc,
      isShowLogin: false,
      username: "",
      password: "",
      nickname: "用户登录",
      logIcon: "arrow",
      isShowLogout: false
    };
  },
  computed: {
    ...mapState({
      isGoBack: state=> state.isGoBack.isGoBack
    })
  },
  methods: {
    ...mapMutations({
      chanisGoBack: 'isGoBack/chanisGoBack'
    }),
    showLogin() {
      if (localStorage.getItem('token'))return;
      this.isShowLogin = true;
    },
    showLoginOut() {
      if (!localStorage.getItem('token'))return;
      this.isShowLogout = true;
    },
    logout() {
      this.$toast.success("退出成功~~");
      localStorage.removeItem("token");
      localStorage.removeItem("userInfo");
      this.avatarSrc = avatarSrc;
      this.nickname = "用户登录";
      this.logIcon = "arrow";
    },
    onSubmit(values) {
      console.log("submit", values);
      let { username, pwd } = values;
      UserLoginAPI({
        username,
        pwd,
      }).then((res) => {
        console.log(res);
        let userInfo = res.data.userInfo;
        this.$toast.success("登录成功~~");
        localStorage.setItem("token", res.data.token);
        localStorage.setItem("userInfo", JSON.stringify(userInfo));
        setTimeout(() => {
          this.avatarSrc = userInfo.avatar;
          this.nickname = userInfo.nickname;
          this.logIcon = "cross";
          this.isShowLogin = false;
          
          if (this.isGoBack) {
            console.log('进来了吗');
            this.$router.go(-1);
            this.chanisGoBack(false);
          }
        }, 500);
      });
    },
  },
  created() {
    let token = localStorage.getItem("token");
    if (token) {
      let userInfo = JSON.parse(localStorage.getItem("userInfo"));
      this.avatarSrc = userInfo.avatar;
      this.nickname = userInfo.nickname;
      this.logIcon = "cross";
    }
  },
};
</script>
 
<style lang = "less" scoped>
.van-row {
  padding: 0.2rem 4%;
  background: #333;
  color: #fff;
  .van-col {
    line-height: 0.7rem;
    font-size: 0.18rem;
    img {
      width: 0.7rem;
      border-radius: 50%;
      display: block;
    }
    &:last-child {
      text-align: right;
    }
  }
}
.van-popup {
  width: 85%;
  height: 30%;
}
</style>